<template>
    <view class="product-detail">
        <!-- 状态栏占位 -->
        <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

        <!-- 返回按钮 -->
        <view class="back-button" :style="{ top: statusBarHeight + 'px' }" @click="goBack">
            <uni-icons type="left" size="20" color="#000"></uni-icons>
        </view>

        <view v-if="loading" class="loading">加载中...</view>
        <view v-else-if="productDetail" class="content">
            <!-- 商品轮播图 -->
            <view class="product-swiper-section">
                <swiper class="product-swiper" :indicator-dots="false" :autoplay="true" :interval="1500" :duration="500"
                    :circular="true">
                    <swiper-item v-for="(img, index) in imageList" :key="index">
                        <image :src="img" mode="aspectFit" class="swiper-image"></image>
                    </swiper-item>
                </swiper>
            </view>

            <!-- 商品信息 -->
            <view class="product-info-section">
                <!-- 商品标题 -->
                <view class="product-title" style="font-weight: 700;">{{ productDetail.title || '' }}</view>

                <!-- 价格信息 -->
                <view class="price-section">
                    <view class="current-price">¥{{ productDetail.price || '0.00' }}</view>
                    <view class="original-price">
                        <text style="margin-right: 10rpx;">价格: </text>
                        <text class="original-price-value">¥{{ productDetail.original_price || '0.00' }}</text>
                    </view>
                    <view class="price-info">
                        <text class="shipping-fee">
                            <text style="margin-right: 10rpx;">快递:</text>
                            <text>{{ productDetail.courier_fee || '0.00' }}</text>
                        </text>
                        <text class="sales">月销{{ productDetail.sold || 0 }}</text>
                        <text class="shipping-address">{{ productDetail.shipping_address || '' }}</text>
                    </view>
                </view>
            </view>

            <!-- 购买限制和保障信息 -->
            <view class="info-section">
                <view class="info-items">
                    <text class="info-text" style="font-weight: 700;">每人限购10件</text>
                    <view class="three-dots">
                        <view class="dot"></view>
                        <view class="dot"></view>
                        <view class="dot"></view>
                    </view>
                </view>
                <view class="info-item">
                    <text class="info-text" style="font-weight: 700;">满78元,享包邮;不包邮地区:新疆,西藏,台湾...</text>
                    <view class="three-dots">
                        <view class="dot"></view>
                        <view class="dot"></view>
                        <view class="dot"></view>
                    </view>
                </view>
                <view class="info-item">
                    <text class="info-text">正品保证·破损暴涨·赠运费险·极速退款·七天退换</text>
                    <view class="three-dots">
                        <view class="dot"></view>
                        <view class="dot"></view>
                        <view class="dot"></view>
                    </view>
                </view>
            </view>

            <!-- 产品参数和选择 -->
            <view class="info-section" style="background-color: #fff;">
                <view class="info-item" @click="showProductParams">
                    <text class="info-text-bold" style="font-weight: 700;">产品参数</text>
                    <view class="three-dots">
                        <view class="dot"></view>
                        <view class="dot"></view>
                        <view class="dot"></view>
                    </view>
                </view>
                <view class="info-item" @click="selectColorCategory">
                    <text class="info-text-bold" style="font-weight: 700;">选择颜色分类</text>
                    <view class="three-dots">
                        <view class="dot"></view>
                        <view class="dot"></view>
                        <view class="dot"></view>
                    </view>
                </view>
            </view>

            <!-- 类似商品推荐 -->
            <view v-if="recommendList && recommendList.length > 0" class="recommend-section">
                <view class="recommend-title">类似商品</view>
                <view class="waterfall-container">
                    <view class="waterfall-column" v-for="(column, colIndex) in waterfallColumns" :key="colIndex">
                        <view class="product-item-waterfall" v-for="(item, index) in column" :key="index"
                            @click="goToProductDetail(item)">
                            <image :src="item.img" mode="widthFix"></image>
                            <view class="product-info-waterfall">
                                <view class="product-title">{{ item.title }}</view>
                                <view>
                                    <view  class="product-price">
                                        <text class="price">¥{{ item.price }}</text>
                                        <view class="product-sales">{{ item.sold || 0 }}人付款</view>
                                    </view>
                                    <text class="original-price">¥{{ item.original_price }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view v-else class="error">加载失败</view>

        <!-- 加入购物车抽屉弹窗 -->
        <view class="drawer-mask" v-if="showDrawer" @click="closeDrawer"></view>
        <view class="drawer-container" :class="{ 'drawer-show': showDrawer }">
            <view class="drawer-header">
                <view class="drawer-product-info">
                    <image :src="selectedProductImg" mode="aspectFill" class="drawer-product-img"></image>
                    <view class="drawer-product-detail">
                        <view class="drawer-product-price">¥{{ selectedPrice || productDetail.price || '0.00' }}</view>
                        <view class="drawer-product-stock">剩余: {{ selectedStock || 0 }}</view>
                        <view class="drawer-quantity-selector">
                            <view class="quantity-btn" :class="{ 'disabled': quantity <= 1 }" @click="decreaseQuantity">
                                <uni-icons type="minus" size="25" color="#333"></uni-icons>
                            </view>
                            <view class="quantity-value">{{ quantity }}</view>
                            <view class="quantity-btn" :class="{ 'disabled': quantity >= selectedStock }"
                                @click="increaseQuantity">
                                <uni-icons type="plus" size="25" color="#333"></uni-icons>
                            </view>
                        </view>
                    </view>
                </view>

            </view>

            <view class="drawer-content">
                <!-- 优惠信息 -->
                <view class="drawer-section">
                    <view class="drawer-offer">
                        <text class="offer-label">优惠</text>
                        <text class="offer-value">优惠券抵扣-0元</text>
                    </view>
                </view>

                <!-- 规格选择 -->
                <view class="drawer-section"
                    v-if="productDetail && productDetail.norm && productDetail.norm.length > 0">
                    <view class="drawer-section-title"></view>
                    <view class="spec-options">
                        <view v-for="(value, index) in productDetail.norm[0].value" :key="index" class="spec-option"
                            :class="{ 'spec-selected': selectedSpecIndex === index }" @click="selectSpec(index)">
                            {{ value }}
                        </view>
                    </view>
                </view>
            </view>
            <!-- 添加空标签撑起高度 -->
            <view style="height: 188rpx;"></view>
            <view class="drawer-footer">
                <view class="btn-add-cart-drawer" @click="handleDrawerConfirm">
                    {{ drawerMode === 'cart' ? '加入购物车' : `立即支付 ¥${totalPrice}` }}
                </view>
            </view>
        </view>

        <!-- 底部功能栏 -->
        <view class="bottom-bar">
            <view class="bottom-bar-left">
                <view class="bar-item" @click="handleCustomerService">
                    <uni-icons type="headphones" size="24" color="#666"></uni-icons>
                    <text class="bar-text">客服</text>
                </view>
                <view class="bar-item" @click="handleShop">
                    <uni-icons type="home" size="24" color="#666"></uni-icons>
                    <text class="bar-text">店铺</text>
                </view>
                <view class="bar-item" @click="handleCollect">
                    <uni-icons :type="isCollected ? 'star-filled' : 'star'" size="24"
                        :color="isCollected ? '#ff9500' : '#666'"></uni-icons>
                    <text class="bar-text">{{ isCollected ? '已收藏' : '收藏' }}</text>
                </view>
            </view>
            <view class="bottom-bar-right">
                <view class="btn-add-cart" @click="handleAddToCart">加入购物车</view>
                <view class="btn-buy-now" @click="handleBuyNow">立即购买</view>
            </view>
        </view>
    </view>
</template>

<script>
import { productApi, shoppingApi } from '@/api/indexAPI.js';
import { public_img } from '@/static/public.js';

export default {
    data() {
        return {
            productId: '',
            productDetail: null,
            loading: false,
            imageList: [], // 商品图片列表
            statusBarHeight: 0, // 状态栏高度
            recommendList: [], // 推荐商品列表
            waterfallColumnCount: 2, // 瀑布流列数
            waterfallColumns: [[], []], // 瀑布流列数据
            isCollected: false, // 是否已收藏
            showDrawer: false, // 是否显示抽屉弹窗
            drawerMode: 'cart', // 抽屉模式：'cart' 加入购物车，'buy' 立即购买
            quantity: 1, // 选择的数量
            selectedSpecIndex: 0, // 选中的规格索引
            selectedPrice: '', // 选中的规格价格
            selectedStock: 0, // 选中的规格库存
            selectedProductImg: '', // 选中的规格图片
            shouldOpenDrawerOnShow: false, // 是否应该在onShow时打开抽屉
            savedDrawerState: null // 保存的抽屉状态
        };
    },
    computed: {
        // 计算总价格
        totalPrice() {
            const price = parseFloat(this.selectedPrice || this.productDetail?.price || 0);
            const qty = this.quantity || 1;
            const total = (price * qty).toFixed(2);
            return total;
        }
    },
    onLoad(options) {
        console.log('商品详情onLoad执行');
        // 获取设备状态栏高度
        this.getStatusBarHeight();

        this.productId = options.id;
        console.log('商品ID:', this.productId);

        // 检查登录状态
        if (!this.checkLoginStatus()) {
            return;
        }

        // 请求商品详情接口
        this.getProductDetail();
    },
    onShow() {
        // 检测是否从支付页面返回，如果是则打开抽屉
        if (this.shouldOpenDrawerOnShow && this.savedDrawerState) {
            // 恢复抽屉状态
            this.drawerMode = this.savedDrawerState.drawerMode || 'buy';
            this.quantity = this.savedDrawerState.quantity || 1;
            this.selectedSpecIndex = this.savedDrawerState.selectedSpecIndex || 0;
            this.selectedPrice = this.savedDrawerState.selectedPrice || '';
            this.selectedStock = this.savedDrawerState.selectedStock || 0;
            this.selectedProductImg = this.savedDrawerState.selectedProductImg || '';

            // 打开抽屉
            this.showDrawer = true;

            // 重置标志
            this.shouldOpenDrawerOnShow = false;
            this.savedDrawerState = null;
        }
    },
    methods: {
        // 获取设备状态栏高度
        getStatusBarHeight() {
            try {
                const systemInfo = uni.getSystemInfoSync();
                this.statusBarHeight = systemInfo.statusBarHeight || 0;
                console.log('状态栏高度:', this.statusBarHeight);
            } catch (err) {
                console.error('获取状态栏高度失败', err);
                // 默认状态栏高度
                this.statusBarHeight = 20;
            }
        },

        // 获取商品详情
        async getProductDetail() {
            if (!this.productId) {
                uni.showToast({
                    title: '商品ID不能为空',
                    icon: 'none'
                });
                return;
            }

            this.loading = true;

            try {
                const response = await productApi.getProductDetail(this.productId);

                // 检查返回的code值，code === 1 表示成功
                if (response && response.code === 1) {
                    this.productDetail = response.data;
                    console.log('商品详情:', this.productDetail);
                    // 处理商品图片
                    if (this.productDetail && this.productDetail.imgs) {
                        this.processImages(this.productDetail.imgs);
                    }
                    // 处理推荐商品列表
                    if (this.productDetail && this.productDetail.list && Array.isArray(this.productDetail.list)) {
                        this.processRecommendList(this.productDetail.list);
                    }
                    // 检查收藏状态（如果API返回了收藏状态）
                    if (this.productDetail && this.productDetail.star !== undefined) {
                        this.isCollected = this.productDetail.star === 1 || this.productDetail.star === true;
                    }
                } else {
                    throw {
                        code: response.code || -1,
                        msg: response.msg || '获取商品详情失败'
                    };
                }
            } catch (error) {
                console.error('获取商品详情失败:', error);

                // 检查是否是登录失效的情况（code === 3 或其他表示未登录的code）
                const response = error.data || error;
                if (response && (response.code === 3 || response.code === -1 || response.msg && response.msg.includes('登录'))) {
                    // token失效或未登录，跳转到登录页面
                    uni.showToast({
                        title: '登录已失效，请重新登录',
                        icon: 'none',
                        duration: 1500
                    });

                    setTimeout(() => {
                        uni.redirectTo({
                            url: '/pages/login/index',
                            fail: () => {
                                uni.reLaunch({
                                    url: '/pages/login/index'
                                });
                            }
                        });
                    }, 1500);
                    return;
                }

                let errorMsg = '获取商品详情失败，请稍后重试';
                if (error.msg) {
                    errorMsg = error.msg;
                } else if (error.data && error.data.msg) {
                    errorMsg = error.data.msg;
                }

                uni.showToast({
                    title: errorMsg,
                    icon: 'none',
                    duration: 2000
                });
            } finally {
                this.loading = false;
            }
        },

        // 处理商品图片
        processImages(imgs) {
            if (!imgs) {
                this.imageList = [];
                return;
            }

            // 如果是字符串，按逗号分割
            let imgArray = [];
            if (typeof imgs === 'string') {
                imgArray = imgs.split(',').map(img => img.trim()).filter(img => img);
            } else if (Array.isArray(imgs)) {
                imgArray = imgs;
            }

            // 处理图片URL，添加公共域名前缀
            this.imageList = imgArray.map(img => {
                const imgUrl = img.trim();
                if (imgUrl.startsWith('http://') || imgUrl.startsWith('https://')) {
                    return imgUrl;
                }
                return public_img + (imgUrl.startsWith('/') ? imgUrl : '/' + imgUrl);
            });

            console.log('处理后的图片列表:', this.imageList);
        },

        // 返回上一页
        goBack() {
            uni.navigateBack({
                delta: 1,
                fail: () => {
                    // 如果返回失败（比如是第一个页面），则跳转到首页
                    uni.reLaunch({
                        url: '/pages/index/index'
                    });
                }
            });
        },

        // 处理推荐商品列表
        processRecommendList(list) {
            if (!list || !Array.isArray(list) || list.length === 0) {
                this.recommendList = [];
                this.waterfallColumns = [[], []];
                return;
            }

            // 处理商品数据，添加图片域名
            this.recommendList = list.map(item => {
                let imgUrl = item.img || '';
                // 如果图片URL不是完整URL，添加公共域名
                if (imgUrl && !imgUrl.startsWith('http://') && !imgUrl.startsWith('https://')) {
                    imgUrl = public_img + (imgUrl.startsWith('/') ? imgUrl : '/' + imgUrl);
                }
                return {
                    ...item,
                    img: imgUrl
                };
            });

            // 构建瀑布流数据
            this.buildWaterfallData();
        },

        // 构建瀑布流数据
        buildWaterfallData() {
            // 初始化列数组
            const columns = Array.from({ length: this.waterfallColumnCount }, () => []);

            // 将商品列表按顺序分配到各列
            this.recommendList.forEach((item, index) => {
                const columnIndex = index % this.waterfallColumnCount;
                columns[columnIndex].push(item);
            });

            // 更新瀑布流列数据
            this.waterfallColumns = columns;
        },

        // 跳转到商品详情
        goToProductDetail(item) {
            if (item && item.id) {
                uni.navigateTo({
                    url: `/pages/product/index?id=${item.id}`
                });
            }
        },

        // 客服
        handleCustomerService() {
            uni.showToast({
                title: '客服功能开发中',
                icon: 'none'
            });
        },

        // 店铺
        handleShop() {
            uni.showToast({
                title: '店铺功能开发中',
                icon: 'none'
            });
        },

        // 收藏/取消收藏
        async handleCollect() {
            if (!this.productId) {
                uni.showToast({
                    title: '商品信息错误',
                    icon: 'none'
                });
                return;
            }

            try {
                let response;
                if (this.isCollected) {
                    // 取消收藏
                    response = await productApi.cancelCollectProduct(this.productId);
                } else {
                    // 收藏
                    response = await productApi.collectProduct(this.productId);
                }

                if (response && response.code === 1) {
                    // 切换收藏状态
                    this.isCollected = !this.isCollected;
                    uni.showToast({
                        title: this.isCollected ? '已收藏' : '已取消收藏',
                        icon: 'success'
                    });
                } else {
                    throw {
                        code: response.code || -1,
                        msg: response.msg || '操作失败'
                    };
                }
            } catch (error) {
                console.error('收藏操作失败:', error);
                let errorMsg = '操作失败，请稍后重试';
                if (error.msg) {
                    errorMsg = error.msg;
                } else if (error.data && error.data.msg) {
                    errorMsg = error.data.msg;
                }

                uni.showToast({
                    title: errorMsg,
                    icon: 'none',
                    duration: 2000
                });
            }
        },

        // 打开加入购物车抽屉
        handleAddToCart() {
            if (!this.productDetail) {
                uni.showToast({
                    title: '商品信息加载中',
                    icon: 'none'
                });
                return;
            }
            // 初始化数据
            this.quantity = 1;
            this.selectedSpecIndex = 0;
            this.drawerMode = 'cart';
            this.initDrawerData();
            this.showDrawer = true;
        },

        // 初始化抽屉数据
        initDrawerData() {
            if (!this.productDetail) return;

            // 设置默认图片
            if (this.imageList && this.imageList.length > 0) {
                this.selectedProductImg = this.imageList[0];
            }

            // 如果有规格数据，初始化第一个规格的信息
            if (this.productDetail.norm_arr && this.productDetail.norm_arr.length > 0) {
                const firstSpec = this.productDetail.norm_arr[0];
                this.selectedPrice = firstSpec.price || this.productDetail.price || '0.00';
                this.selectedStock = firstSpec.stock || 0;
                if (firstSpec.img) {
                    this.selectedProductImg = firstSpec.img.startsWith('http') ? firstSpec.img : (public_img + (firstSpec.img.startsWith('/') ? firstSpec.img : '/' + firstSpec.img));
                }
            } else {
                // 没有规格数据，使用商品默认信息
                this.selectedPrice = this.productDetail.price || '0.00';
                this.selectedStock = this.productDetail.stock || 0;
            }
        },

        // 选择规格
        selectSpec(index) {
            this.selectedSpecIndex = index;
            if (this.productDetail.norm_arr && this.productDetail.norm_arr[index]) {
                const spec = this.productDetail.norm_arr[index];
                this.selectedPrice = spec.price || this.productDetail.price || '0.00';
                this.selectedStock = spec.stock || 0;
                if (spec.img) {
                    this.selectedProductImg = spec.img.startsWith('http') ? spec.img : (public_img + (spec.img.startsWith('/') ? spec.img : '/' + spec.img));
                }
                // 如果当前数量大于新规格的库存，调整为库存数量
                if (this.quantity > this.selectedStock) {
                    this.quantity = this.selectedStock;
                }
            }
        },

        // 减少数量
        decreaseQuantity() {
            if (this.quantity > 1) {
                this.quantity--;
            }
        },

        // 增加数量
        increaseQuantity() {
            if (this.quantity < this.selectedStock) {
                this.quantity++;
            } else {
                uni.showToast({
                    title: '库存不足',
                    icon: 'none'
                });
            }
        },

        // 关闭抽屉
        closeDrawer() {
            this.showDrawer = false;
            // 重置模式
            this.drawerMode = 'cart';
        },

        // 确认加入购物车
        async confirmAddToCart() {
            if (!this.productDetail || !this.productId) {
                uni.showToast({
                    title: '商品信息错误',
                    icon: 'none'
                });
                return;
            }

            // 验证数量
            if (this.quantity <= 0) {
                uni.showToast({
                    title: '数量不能小于1',
                    icon: 'none'
                });
                return;
            }

            if (this.quantity > this.selectedStock) {
                uni.showToast({
                    title: '数量不能大于库存',
                    icon: 'none'
                });
                return;
            }

            try {
                // 构建norm参数
                let norm = '';
                if (this.productDetail.norm && this.productDetail.norm.length > 0 && this.productDetail.norm[0].value) {
                    const selectedValue = this.productDetail.norm[0].value[this.selectedSpecIndex];
                    norm = JSON.stringify([{
                        name: this.productDetail.norm[0].name || 'name',
                        value: selectedValue
                    }]);
                } else {
                    norm = JSON.stringify([{
                        name: 'name',
                        value: this.productDetail.title || ''
                    }]);
                }

                const response = await shoppingApi.addToCart(this.productId, this.quantity, norm);

                if (response && response.code === 1) {
                    uni.showToast({
                        title: '已加入购物车',
                        icon: 'success'
                    });
                    this.closeDrawer();
                } else {
                    throw {
                        code: response.code || -1,
                        msg: response.msg || '加入购物车失败'
                    };
                }
            } catch (error) {
                console.error('加入购物车失败:', error);
                let errorMsg = '加入购物车失败，请稍后重试';
                if (error.msg) {
                    errorMsg = error.msg;
                } else if (error.data && error.data.msg) {
                    errorMsg = error.data.msg;
                }

                uni.showToast({
                    title: errorMsg,
                    icon: 'none',
                    duration: 2000
                });
            }
        },

        // 立即购买
        handleBuyNow() {
            if (!this.productDetail) {
                uni.showToast({
                    title: '商品信息加载中',
                    icon: 'none'
                });
                return;
            }
            // 初始化数据
            this.quantity = 1;
            this.selectedSpecIndex = 0;
            this.drawerMode = 'buy';
            this.initDrawerData();
            this.showDrawer = true;
        },

        // 处理抽屉确认按钮（根据模式执行不同操作）
        async handleDrawerConfirm() {
            if (this.drawerMode === 'cart') {
                // 加入购物车模式
                await this.confirmAddToCart();
            } else {
                // 立即购买模式
                await this.confirmBuyNow();
            }
        },

        // 确认立即购买（跳转到支付页面）
        async confirmBuyNow() {
            if (!this.productDetail || !this.productId) {
                uni.showToast({
                    title: '商品信息错误',
                    icon: 'none'
                });
                return;
            }

            // 验证数量
            if (this.quantity <= 0) {
                uni.showToast({
                    title: '数量不能小于1',
                    icon: 'none'
                });
                return;
            }

            if (this.quantity > this.selectedStock) {
                uni.showToast({
                    title: '数量不能大于库存',
                    icon: 'none'
                });
                return;
            }

            // 保存当前抽屉状态，以便从支付页面返回时恢复
            this.savedDrawerState = {
                drawerMode: this.drawerMode,
                quantity: this.quantity,
                selectedSpecIndex: this.selectedSpecIndex,
                selectedPrice: this.selectedPrice,
                selectedStock: this.selectedStock,
                selectedProductImg: this.selectedProductImg
            };

            // 设置标志，表示从支付页面返回时应该打开抽屉
            this.shouldOpenDrawerOnShow = true;

            // 关闭抽屉
            this.closeDrawer();

            // 构建订单信息
            const orderInfo = {
                productId: this.productId,
                productTitle: this.productDetail.title || '',
                productImg: this.selectedProductImg || (this.imageList && this.imageList[0]) || '',
                price: this.selectedPrice || this.productDetail.price || '0.00',
                quantity: this.quantity,
                totalPrice: this.totalPrice,
                spec: this.productDetail.norm && this.productDetail.norm.length > 0 && this.productDetail.norm[0].value
                    ? this.productDetail.norm[0].value[this.selectedSpecIndex]
                    : '',
                specName: this.productDetail.norm && this.productDetail.norm.length > 0
                    ? this.productDetail.norm[0].name || '规格'
                    : '规格'
            };

            // 跳转到支付页面，传递订单信息
            uni.navigateTo({
                url: `/pages/pay/index?orderInfo=${encodeURIComponent(JSON.stringify(orderInfo))}`
            });
        },
        // 检查登录状态
        checkLoginStatus() {
            try {
                // 从本地存储中获取token和uid
                const token = uni.getStorageSync('token');
                const uid = uni.getStorageSync('uid');
                console.log('获取到的token:', token, 'uid:', uid);

                // 如果没有token，则跳转到登录页面
                if (!token || !uid) {
                    console.log('未登录，准备跳转到登录页面');
                    uni.showToast({
                        title: '请先登录',
                        icon: 'none',
                        duration: 1500
                    });

                    // 延迟跳转以显示提示信息
                    setTimeout(() => {
                        uni.redirectTo({
                            url: '/pages/login/index',
                            fail: (err) => {
                                console.error('跳转到登录页面失败:', err);
                                // 如果redirectTo失败，尝试使用reLaunch
                                uni.reLaunch({
                                    url: '/pages/login/index'
                                });
                            }
                        });
                    }, 1500);
                    return false; // 返回false表示未登录
                } else {
                    console.log('用户已登录');
                    return true; // 返回true表示已登录
                }
            } catch (err) {
                console.error('检查登录状态失败', err);
                uni.showToast({
                    title: '登录状态异常，请重新登录',
                    icon: 'none',
                    duration: 1500
                });

                setTimeout(() => {
                    uni.redirectTo({
                        url: '/pages/login/index',
                        fail: () => {
                            uni.reLaunch({
                                url: '/pages/login/index'
                            });
                        }
                    });
                }, 1500);
                return false; // 返回false表示未登录
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.product-detail {
    min-height: 100vh;
    background-color: #fafafa;
    padding-bottom: 100rpx;
    /* 为底部功能栏留出空间 */
}

/* 状态栏占位 */
.status-bar {
    width: 100%;
    background-color: transparent;
}

/* 返回按钮 */
.back-button {
    position: fixed;
    left: 30rpx;
    z-index: 10;
    width: 64rpx;
    height: 64rpx;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    margin-top: 5px;
}

.loading {
    padding: 40rpx;
    text-align: center;
    color: #999;
}

.error {
    padding: 40rpx;
    text-align: center;
    color: #f56c6c;
}

/* 商品轮播图区域 */
.product-swiper-section {
    width: 100%;
    height: 750rpx;
    background-color: #fff;
}

.product-swiper {
    width: 100%;
    height: 100%;
}

.swiper-image {
    width: 100%;
    height: 100%;
    display: block;
}

/* 商品信息区域 */
.product-info-section {
    padding: 30rpx;
    background-color: #fff;
    margin-top: 8px;
}

/* 商品标题 */
.product-title {
    font-size: 32rpx;
    color: #333;
    line-height: 1.5;
    margin-bottom: 30rpx;
}

.product-title {
    font-size: 14px;
    color: #505050;
    margin-bottom: 3px;
}

/* 价格区域 */
.price-section {
    margin-top: 20rpx;
}

.current-price {
    font-size: 21px;
    color: #f87d00;
    margin-bottom: 20rpx;
    line-height: 1.2;
}

.original-price-value {
    text-decoration: line-through;
}

.price-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 24rpx;
    color: #999;
    line-height: 1.5;
}

.shipping-fee {
    margin-right: 20rpx;
}

.sales {
    margin-right: 20rpx;
}

.shipping-address {
    margin-right: 0;
}

/* 信息区域 */
.info-section {
    margin-top: 16rpx;
    padding: 0 30rpx;
}

.info-item,
.info-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    position: relative;
}

.info-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #cccccc;
}

.info-text {
    font-size: 13px;
    color: #333333;
    line-height: 1.5;
    flex: 1;
    margin-right: 20rpx;
}

.info-text-bold {
    font-size: 16px;
    font-weight: 700;
    color: #333333;
    line-height: 1.5;
    flex: 1;
    margin-right: 20rpx;
}

/* 三个点图标 */
.three-dots {
    display: flex;
    align-items: center;
    gap: 6rpx;
}

.dot {
    width: 6rpx;
    height: 6rpx;
    border-radius: 50%;
    background-color: #999;
}

.recommend-title {
    background-color: #fff;
    font-size: 18px;
    color: #333;
    padding: 5px 0px 5px 14px;
    margin: 8px 0;
}

.waterfall-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 20rpx 20rpx;
}

.waterfall-column {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-right: 15rpx;
}

.waterfall-column:last-child {
    margin-right: 0;
}

.product-item-waterfall {
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    margin-bottom: 7px;
    padding: 5px;
}

.product-item-waterfall image {
    width: 100%;
    border-radius: 5.5px;
}

.product-info-waterfall {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}



.product-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.price {
    font-size: 14px;
    color: #ff4757;
}

.original-price {
    font-size: 24rpx;
    color: #999;
}

.product-sales {
    font-size: 13px;
    color: #8b8b8c;
}

/* 底部功能栏 */
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    z-index: 999;
}

.bottom-bar-left {
    display: flex;
    align-items: center;
    width: 33%;
}

.bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4rpx;
    width: 50%;
}

.bar-text {
    font-size: 22rpx;
    color: #666;
}

.bottom-bar-right {
    display: flex;
    align-items: center;
    flex: 1;
    margin-left: 10px;
}

.btn-add-cart {
    flex: 1;
    height: 90rpx;
    background-color: #ff0000;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px 0 0 50px;
}

.btn-buy-now {
    flex: 1;
    height: 90rpx;
    background-color: #FF8D1A;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 50px 50px 0;
}

/* 抽屉弹窗 */
.drawer-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.drawer-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    max-height: 80vh;
    z-index: 1001;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.drawer-container.drawer-show {
    transform: translateY(0);
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px;
    position: relative;
}

.drawer-product-info {
    display: flex;
    align-items: center;
    flex: 1;
}

.drawer-product-img {
    width: 75px;
    height: 75px;
    border-radius: 8rpx;
    margin-right: 20rpx;
}

.drawer-product-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.drawer-product-price {
    font-size: 17px;
    color: #ff0000;
}

.drawer-product-stock {
    font-size: 15px;
    color: #696969;
    margin-bottom: 3px;
}

.drawer-quantity-selector {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.drawer-quantity-selector .quantity-btn.disabled {
    border-color: #eee;
}

.drawer-quantity-selector .quantity-btn.disabled .uni-icons {
    color: #ccc !important;
}

.drawer-quantity-selector .quantity-value {
    margin: 0 20rpx;
    font-size: 26rpx;
    color: #333;
    min-width: 40rpx;
    text-align: center;
}


.drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 7px;
}

.drawer-section:last-child {
    border-bottom: none;
}

.drawer-section-title {
    height: 12px;
}

.quantity-selector {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.quantity-btn.disabled {
    color: #ccc;
    border-color: #eee;
}

.quantity-value {
    margin: 0 30rpx;
    font-size: 28rpx;
    color: #333;
    min-width: 60rpx;
    text-align: center;
}

.drawer-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #c3c3c3;
    padding: 8px 0;
    border-bottom: 1px solid #c3c3c3;
}

.offer-label {
    font-size: 16px;
    color: #505050;
}

.offer-value {
    font-size: 16px;
    color: #505050;
}

.spec-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
}

.spec-option {
    padding: 3px 35px;
    border-radius: 8rpx;
    font-size: 26rpx;
    color: #333;
    background-color: #F5F5F5;
}

.spec-option.spec-selected {
    color: white;
    background-color: red;
}


.btn-add-cart-drawer {
    width: 100%;
    height: 88rpx;
    background-color: red;
    font-weight: bold;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>